<template>
    <el-dropdown trigger="click" @command="changeLanguage">
        <el-icon class="icon" size="30px">
            <svg data-cy="languagePicker" width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                <title>ionicons-v5-l</title>
                <path
                    d="M478.33,433.6l-90-218a22,22,0,0,0-40.67,0l-90,218a22,22,0,1,0,40.67,16.79L316.66,406H419.33l18.33,44.39A22,22,0,0,0,458,464a22,22,0,0,0,20.32-30.4ZM334.83,362,368,281.65,401.17,362Z"
                />
                <path
                    d="M267.84,342.92a22,22,0,0,0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73,39.65-53.68,62.11-114.75,71.27-143.49H330a22,22,0,0,0,0-44H214V70a22,22,0,0,0-44,0V90H54a22,22,0,0,0,0,44H251.25c-9.52,26.95-27.05,69.5-53.79,108.36-31.41-41.68-43.08-68.65-43.17-68.87a22,22,0,0,0-40.58,17c.58,1.38,14.55,34.23,52.86,83.93.92,1.19,1.83,2.35,2.74,3.51-39.24,44.35-77.74,71.86-93.85,80.74a22,22,0,1,0,21.07,38.63c2.16-1.18,48.6-26.89,101.63-85.59,22.52,24.08,38,35.44,38.93,36.1a22,22,0,0,0,30.75-4.9Z"
                />
            </svg><!-- Source: https://www.svgrepo.com/svg/326688/language-outline -->
        </el-icon>
        <template #dropdown>
            <el-dropdown-item v-for="item in options" :key="item.lang" :command="item.lang">
                {{ item.text }}
            </el-dropdown-item>
        </template>
    </el-dropdown>
</template>

<script lang="ts" setup name="LanguagePicker">
import { ElDropdown, ElDropdownItem, ElIcon } from 'element-plus';
import { onBeforeMount } from 'vue';

import i18n from '@/i18n';
import { local } from '@/store';

const options = [
    { lang: 'zh-cn', text: '简体中文' },
    { lang: 'en', text: 'English (99%)' },
    { lang: 'de', text: 'Deutsch (10%)' },
    { lang: 'pl', text: 'Polski (13%)' },
    { lang: 'dev', text: 'dev' },
];

onBeforeMount(() => {
    i18n.global.locale.value = local.value.language;
});

const changeLanguage = (value: any) => {
    i18n.global.locale.value = value;
    local.value.language = value;
};
</script>

<style lang="less" scoped>
.icon {
    margin-top: v-bind("`${(local.menu_height) / 2}px`");
    height: 0px;
    cursor: pointer;
}
</style>
